<div class="devui-panel devui-panel-{{ type }} {{ cssClass }}" [@noAnimation]>
  <div class="devui-panel-heading" (click)="toggleBody()" [style.cursor]="isCollapsed !== undefined ? 'pointer' : null">
    <ng-content select="d-panel-header"></ng-content>
  </div>
  <div
    class="devui-panel-body"
    [ngClass]="{ 'devui-panel-body-collapse': isCollapsed !== undefined, 'has-left-padding': hasLeftPadding }"
    @collapseForDomDestroy
    [@.disabled]="!showAnimation"
    *ngIf="isCollapsed === undefined || isCollapsed"
  >
    <ng-container *ngIf="panelFooter || panelHeader || panelBody; else elseTemplate">
      <ng-template [ngTemplateOutlet]="panelBodyTpl"></ng-template>
    </ng-container>
    <ng-template #elseTemplate>
      <div class="d-panel-body">
        <ng-content></ng-content>
      </div>
    </ng-template>
  </div>
  <div class="devui-panel-footer" *ngIf="panelFooter">
    <ng-content select="d-panel-footer"></ng-content>
  </div>
</div>

<ng-template #panelBodyTpl>
  <ng-content select="d-panel-body"></ng-content>
</ng-template>
